<script setup lang="ts" name="TitleBarProperty">
import { TitleBarProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'
// 导航栏属性面板

const props = defineProps<{ modelValue: TitleBarProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)

// 表单校验
const rules = {}
</script>

<template>
  <MallProperty v-model="formData.style">
    <ElForm label-width="85px" :model="formData" :rules="rules">
      <ElCard header="风格" class="property-group" shadow="never">
        <ElFormItem label="背景图片" prop="bgImgUrl">
          <UploadImage v-model="formData.bgImgUrl" width="100%" height="40px">
            <template #tip>建议尺寸 750*80</template>
          </UploadImage>
        </ElFormItem>
        <ElFormItem label="标题位置" prop="textAlign">
          <ElRadioGroup v-model="formData!.textAlign">
            <ElTooltip content="居左" placement="top">
              <ElRadioButton label="left">
                <SvgIcon icon="ant-design:align-left-outlined" />
              </ElRadioButton>
            </ElTooltip>
            <ElTooltip content="居中" placement="top">
              <ElRadioButton label="center">
                <SvgIcon icon="ant-design:align-center-outlined" />
              </ElRadioButton>
            </ElTooltip>
          </ElRadioGroup>
        </ElFormItem>
      </ElCard>
      <ElCard header="主标题" class="property-group" shadow="never">
        <ElFormItem label="文字" prop="title" label-width="40px">
          <InputColorPicker v-model="formData.title" v-model:color="formData.titleColor" show-word-limit maxlength="20" />
        </ElFormItem>
        <ElFormItem label="大小" prop="titleSize" label-width="40px">
          <ElSlider v-model="formData.titleSize" :max="60" :min="10" show-input input-size="small" />
        </ElFormItem>
        <ElFormItem label="粗细" prop="titleWeight" label-width="40px">
          <ElSlider v-model="formData.titleWeight" :min="100" :max="900" :step="100" show-input input-size="small" />
        </ElFormItem>
      </ElCard>
      <ElCard header="副标题" class="property-group" shadow="never">
        <ElFormItem label="文字" prop="description" label-width="40px">
          <InputColorPicker v-model="formData.description" v-model:color="formData.descriptionColor" show-word-limit maxlength="50" />
        </ElFormItem>
        <ElFormItem label="大小" prop="descriptionSize" label-width="40px">
          <ElSlider v-model="formData.descriptionSize" :max="60" :min="10" show-input input-size="small" />
        </ElFormItem>
        <ElFormItem label="粗细" prop="descriptionWeight" label-width="40px">
          <ElSlider v-model="formData.descriptionWeight" :min="100" :max="900" :step="100" show-input input-size="small" />
        </ElFormItem>
      </ElCard>
      <ElCard header="查看更多" class="property-group" shadow="never">
        <ElFormItem label="是否显示" prop="more.show">
          <ElCheckbox v-model="formData.more.show" />
        </ElFormItem>
        <!-- 更多按钮的 样式选择 -->
        <template v-if="formData.more.show">
          <ElFormItem label="样式" prop="more.type">
            <ElRadioGroup v-model="formData.more.type">
              <ElRadio label="text">文字</ElRadio>
              <ElRadio label="icon">图标</ElRadio>
              <ElRadio label="all">文字+图标</ElRadio>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem v-show="formData.more.type !== 'icon'" label="更多文字" prop="more.text">
            <ElInput v-model="formData.more.text" />
          </ElFormItem>
          <ElFormItem label="跳转链接" prop="more.url">
            <MallAppLinkInput v-model="formData.more.url" />
          </ElFormItem>
        </template>
      </ElCard>
    </ElForm>
  </MallProperty>
</template>

<style scoped lang="scss"></style>
